<extend name="Layout:layout"/>

<block name="css">
    <style type="text/css"></style>
    <link rel="stylesheet" href="__PUBLIC__/metis/assets/lib/datatables/3/dataTables.bootstrap.css">
    <link rel="stylesheet" href="__PUBLIC__/metis/assets/lib/datepicker/css/datepicker.css">

</block>

<block name="srcjs">
    <script type="text/javascript" src=""></script>
</block>

<block name="content">
    <div class="row ui-sortable">
        <div class="col-lg-12">
            <!--Begin Datatables-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="box">
                        <header>
                            <div class="icons"> <i class="fa fa-table"></i>
                            </div>
                            <h5>检索</h5>
                        </header>
                        <div class="body">
                            <form class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-md-1" for="dp_begin_date">开始时间
                                </label>
                                <div class="col-md-2">
                                    <input type="text" class="form-control" value="{$t_begin}" id="dp_begin_date">
                                </div>
                                <label class="control-label col-md-1" for="dp_stop_date">结束时间
                                </label>
                                <div class="col-md-2">
                                    <input type="text" class="form-control" value="{$t_stop}" id="dp_stop_date">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" id="btnSelectReportData" class="btn btn-default">检索</button>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" id="exportTotal" class="btn btn-default">导出总表</button>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" id="exportDetail" class="btn btn-default">导出明细</button>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>





                    <!--                    <div class="box">
                                            
                                            <header>
                                                <div class="icons"> <i class="fa fa-table"></i>
                                                </div>
                                                <h5>检索</h5>
                                            </header>
                                            
                                            <div class="body">
                                                <form class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="control-label col-lg-4" for="dp_start_date">日期
                                                        </label>
                                                        <div class="col-lg-3">
                                                          <input type="text" class="form-control" value="{$t_date}" id="dp_start_date">
                                                        </div>
                                                         <div class="col-lg-3">
                                                             <button type="button" id="btnSelectReportData" class="btn btn-default">检索</button>
                                                             
                                                         </div>
                                                      </div>
                                                </form>
                                            </div>
                    
                                        </div>-->
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="box">
                        <header>
                            <div class="icons"> <i class="fa fa-table"></i>
                            </div>
                            <h5>员工列表</h5>
                            <div class="text-right" style="padding: 5px 10px 0px 0px">
                                <!--<button type="button" id="btnExportReportData" class="btn btn-default btn-sm">导出</button>-->
                            </div>
                        </header>
                        <div class="body">
                            <table id="membersTable" class="table table-bordered table-condensed table-hover table-striped text-center">
                                <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">学员编号</th>
                                        <th class="text-center">姓名</th>
                                        <th class="text-center">总共学习时间</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <volist name="members" id="member" key="k">
                                    <tr>
                                        <td>{$k}</td>
                                        <td>{$member.username}</td>
                                        <td>{$member.real_name}</td>
                                        <td>{$member.total_time_study|formatTimeStudy}</td>
                                        <td>
                                            <button 
                                                class="btn btn-default btn-xs"
                                                data-name="btnDetailStudyInfo" 
                                                data-member-uid="{$member.id}"
                                                data-member-username="{$member.username}"
                                                >
                                                详细
                                            </button>
                                        </td>
                                    </tr>
                                </volist>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
    </div>

</block>

<block name="customjs">

    <script src="__PUBLIC__/metis/assets/lib/datatables/jquery.dataTables.js"></script>
    <script src="__PUBLIC__/metis/assets/lib/datatables/3/dataTables.bootstrap.js"></script>
    <script src="__PUBLIC__/metis/assets/lib/datepicker/js/bootstrap-datepicker.js"></script>

    <script>
        function duibi(a, b) {
           var arr = a.split("-");
           var starttime = new Date(arr[0], arr[1], arr[2]);
           var starttimes = starttime.getTime();

           var arrs = b.split("-");
           var lktime = new Date(arrs[0], arrs[1], arrs[2]);
           var lktimes = lktime.getTime();

           if (starttimes > lktimes) {
               
               alert('开始时间大于离开时间，请检查');
               return false;
               
           }
           else
               return true;

       }
       
       
       function checkDate(){
           
            var t_begin = $.trim($("#dp_begin_date").val());
            var t_stop = $.trim($("#dp_stop_date").val());
           
           if( !duibi(t_begin, t_stop) ){
                    return false;
            }
                
            if(t_stop !== ""){
                if(t_begin === ""){
                    alert("请输入起始时间！");
                    return false;
                }
            }
            
            return true;
       }
    </script>


    <script type="text/javascript">
        $(function () {

            $("#dp_begin_date").datepicker({
                format: 'yyyy-mm-dd'
            });
            $("#dp_stop_date").datepicker({
                format: 'yyyy-mm-dd'
            });

            $("#btnSelectReportData").click(function () {
                var t_begin = $.trim($("#dp_begin_date").val());
                var t_stop = $.trim($("#dp_stop_date").val());
                
                if( !checkDate() ){
                    return;
                }

                location.href = "{:U('index')}?tb=" + t_begin+"&ts=" + t_stop;

                
            });

            $("#exportTotal").click(function () {
                var t_begin = $.trim($("#dp_begin_date").val());
                var t_stop = $.trim($("#dp_stop_date").val());
                
                if( !checkDate() ){
                    return;
                }
                
                window.open("{:U('exportTotalExcel')}?tb=" + t_begin +"&ts=" + t_stop);
            });
            
            $("#exportDetail").click(function () {
                var t_begin = $.trim($("#dp_begin_date").val());
                var t_stop = $.trim($("#dp_stop_date").val());
                
                if( !checkDate() ){
                    return;
                }
                
                window.open("{:U('exportDetailExcel')}?tb=" + t_begin +"&ts=" + t_stop);
            });
            
            

            $('#membersTable').dataTable({
                "scrollX": true,
                "language": dtChinese
            });

            $("#membersTable").delegate("[data-name='btnDetailStudyInfo']", "click", function () {
                var uid = $(this).attr("data-member-uid");
                //console.log(uid);
                var t_begin = $.trim($("#dp_begin_date").val());
                var t_stop = $.trim($("#dp_stop_date").val());
                
                if( !checkDate() ){
                    return;
                }

                location.href = "{:U('detailInfo')}?tb=" + t_begin+"&ts=" + t_stop +"&uid="+uid;

            });



        });
    </script>

</block>